<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="format-detection" content="telephone=no">
		<title>html1</title>
		<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
		<link rel="stylesheet" href="../assets/third/seedsui/plugin/animate/animate.css">
	</head>
	<style type="text/css">
	    .titlebar{
	    	background-color:blue;
	    }
		.titlebar h1{
			color:white;
			font-weight:bold;
		}
		.titlebar span,i{
			color:white;
		}
	</style>
	<body>
		<div id="section_container">
			<section id="main_section" data-role="section" class="active">
				<header>
				<div class="titlebar">
	            <a class="left" href="javascript:history.go(-1)">
	                <i class="icon icon-arrowleft" ></i>
	                <span>退出</span>
	            </a>
	            <h1 class="text-center">Ajax跨域</h1>
	            <a class="right" href="#">
	                <i class="icon icon-menu-fill" ></i>
	            </a>
				</div>
				</header>
				<article id="main_article" data-role="article" data-scroll="pulldown" class="active" style="top:45px;bottom:0px">
					<div class="scroller">
						<div class="widthfull" style="height:100px;padding:5px">
							本例展示在Agile中如何进行跨域请求处理。使用前先启动服务器</br>
							使用exmobi客户端方式跨域需要, 在uixml中设置html容器属性 isbridge="true"
							且页面plusready事件触发后才能正常运行
						</div>
						<div class="widthfull" style="height:60px;padding:5px">
						    jsonp方式跨域无以上限制</br>
						         服务端需要返回jsonp格式数据，参看服务端代码getTemplateData.jsp
						</div>
						<div id="native" class="button" >客户端容器请求</div>
						<ul class="list newslist">
							<li>
								<span class="bold">exmobi容器跨域结果</span>
							</li>
							<script type="text/html" id="lst_temp">
								<%
								  for(var i=0;i<list.length;i++){
								%>
								<li>
									<div>
										<%=list[i].title%>
									</div>
									<small>
										<span><%=list[i].sub2%></span>
									</small>
								</li>
								<%}%>
							</script>
						</ul>
						<div id="jsonp" class="button bg-2">jsonp请求</div>
						<ul class="list newslist">
							<li>
								<span class="bold">jsonp跨域结果</span>
							</li>
							<script type="text/html" id="lst_temp2">
								<%
								  for(var i=0;i<list.length;i++){
								%>
								<li>
									<div>
										<%=list[i].title%>
									</div>
									<small>
										<span><%=list[i].sub2%></span>
									</small>
								</li>
								<%}%>
							</script>
						</ul>
					</div>
				</article>
			</section>
		</div>
		<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="../assets/third/arttemplate/template-native.js"></script>
		<script src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
		<script src="../assets/third/iscroll/iscroll-probe.js"></script>
		<script src="../assets/agile/js/agile.js"></script>
		<script src="../assets/app/js/app.seedsui.js"></script>
		
		<script src="../assets/bridge/agile.exmobi.js"></script>
		<script src="../assets/bridge/exmobi.js"></script>
		<script>
		    $(document).on('plusready',function(){
			    A.hideMask();
			    A.showToast('plusready!');
		    	//只有当plusready后才可以保证使用exmobi客户端的方法
		        //借用exmobi外层容器实现跨域
		        var initlst = function(){
		           	A.util.ajax({
		           		url:$config.exmobiSevice+"/getListData",
		           		async:"true",
		           		type:"get",
		           		dataType:"json",
		           		success:function(data){
		           			alert(ClientUtil.jsonToString(data));
		           			A.template('#lst_temp').renderReplace(data,function(){});
		           		},
		           		error:function(data){
		           			alert("通信失败");
		           		}
		           	});
		        }
				
				$('#native').on(A.options.clickEvent,function(){
					initlst();;
				});
		    });
		    
		    
		    //jsonp实现跨域
		    var initlst2 = function(){
		       	A.ajax({
		       		url:$config.ex_Service+"/myexmobiserv/getListData",
		       		async:"true",
		       		type:"get",
		       		jsonp: "callback",//传递给请求处理程序或页面的
                    jsonpCallback:"datas",//服务端约定好的jsonp前缀函数
		       		dataType:"jsonp",
		       		success:function(data){
		       			alert(JSON.stringify(data));
		       			A.template('#lst_temp2').renderReplace(data,function(){});
		       		},
		       		error:function(data){
		       			alert("通信失败");
		       		}
		       	});
		    }
			$(function(){
			    A.showMask();
			    setTimeout(function(){
			    	A.hideMask();
			    }, 4000);
				$('#jsonp').on(A.options.clickEvent,function(){
					initlst2();
				});
			});
		</script>
	</body>
</html>